.content-block {
    height: 100%;
    display: flex;
    flex-direction: column;

    .content-head {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #F5F5F5;

        padding: 0 20px;
        box-sizing: border-box;

        .cancel-btn,
        .confirm-btn {
            padding: 12px 0;
            box-sizing: border-box;
            // font-family: PingFangSC-Regular;
            font-size: 16px;
            color: #333333;
            line-height: 22px;
        }

        .confirm-btn {
            color: #417CE8;
        }
    }

    .date-range-block {
        display: flex;
        justify-content: space-around;
        padding: 12px 16px;
        box-sizing: border-box;
        align-items: center;

        .date-block {
            flex: 1;
            border-bottom: 1px solid #323232;
            height: 34px;
            line-height: 34px;
            text-align: center;
        }

        .date-active.date-block {
            color: #417CE8;
            border-bottom: 1px solid #417CE8;
        }

        .connec-syb-block {
            width: 45px;
            text-align: center;
        }
    }

    .range-picker-block {
        flex: 1;
    }
}

:global(.mobile) {
    .content-block {
        .content-head {
            padding: 0 px2vw(20px);

            .cancel-btn,
            .confirm-btn {
                padding: px2vw(12px) 0;
                font-size: px2vw(16px);
                line-height: px2vw(22px);
            }
        }

        .date-range-block {
            padding: px2vw(12px) px2vw(16px);

            .date-block {
                height: px2vw(34px);
                line-height: px2vw(34px);
            }

            .connec-syb-block {
                width: px2vw(45px);
            }
        }
    }
}